<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()
const value = ref('');
//  搜索内容
const onSearch = (val) => {
    console.log(val)
};
const onCancel = () => {
    router.back()
};
const show = ref(true);
const close = () => {
    show.value = false;
};
const clickItem = (item) => {
    console.log(item)
}
const activeId = ref(1);
const activeIndex = ref(0);
const items = [
    {
        text: '性别',
        children: [
            { text: '男', id: 1 },
            { text: '女', id: 2 },
        ],
    },
    {
        text: '学历',
        children: [
            { text: '博士', id: 4 },
            { text: '硕士', id: 5 },
            { text: '本科', id: 6 },
        ],
    },
    {
        text: '方向', disabled: false, children: [
            { text: 'JAVA', id: 4 },
            { text: 'Golang', id: 5 },
            { text: 'Web', id: 6 },
        ],
    },
];
</script>
<template>
    <div>
        <form action="/">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        </form>
        <div class="first_div">
            <div class="selected">
                <span>已选标签</span>
            </div>
            <div class="tabList">
                <van-tag :show="show" closeable size="large" type="primary" @close="close" :round="true" :plain="true"
                    color>
                    男
                </van-tag>

            </div>
        </div>
        <div class="select_div">
            <div class="selected">
                <span>待选标签</span>
            </div>
            <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" :items="items" @click-item="clickItem"/>
        </div>
    </div>

</template>
<style lang="scss">
.first_div {

    .selected {
        span {
            margin: 10px;
            color: #999;
            ;
            font-size: 16px;
            font-weight: 400;
        }
    }

    .tabList {
        margin: 10px;
        height: 50px;
    }
}

.select_div {
    border-top: 10px solid #f4f4f4;

    .selected {
        margin: 20px 0px;

        span {
            margin: 20px 10px;
            color: #999;
            ;
            font-size: 16px;
            font-weight: 400;
        }
    }
}

.van-search__action {
    color: #2f89fa;
}
</style>